<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        // color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		color: [],
		padding: [30, 30, 10, 10],
        // padding: [15,15,0,5],
        enableScroll: false,
        legend: {
			show: false,
		},
        xAxis: {
          disableGrid: true,
		  fontSize: 10,
		  fontColor: '#ccc',
		  title: '人数',
		  titleFontSize: 10,
		  titleOffsetY: -260,
		  titleOffsetX: -10,
		  titleFontColor: '#ccc'
        },
        yAxis: {
			splitNumber: 4, //横向网格线数量
			gridType: 'dash', //横向线类型
			dashLength: 1,
			gridColor: '#dddddd',
			data: [{
				min: 0,
				axisLine: false, //不限时y轴
				fontSize: 10,
				fontColor: '#ccc',
			}]
        },
        extra: {
			tooltip: {
				//showCategory: true, //顶部标题
				borderRadius: 10,
				showArrow: false, //是否显示旁边的小三角箭头
				legendShow: false, //是否显示左侧图例
				fontSize: 10,
			},
			markLine: {
				type: 'dash',
			},
			column: {
				type: "group",
				width: 15,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				barBorderRadius: [10, 10, 0, 0],
				linearType: 'custom',
				customColor: ["#FA7D8D", "#EB88E2"],
			}
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "",
				textColor: '#ccc',
				textSize: 10,
                data: [ 10, 16, 15, 33, 60, 43,],
              },
              // {
              //   name: "完成量",
              //   data: [18,27,21,24,6,28]
              // }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 80%;
    height: 300px;
	margin: 200upx auto;
	background: #eee;
  }
</style>